@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Egyptian+Hieroglyphs&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

@import url("https://use.typekit.net/rdd6jch.css");

@font-face {
    font-family: 'Renogare';
    src: url('fonts/Renogare-Regular.otf');
}

@media only screen and (max-width: 900px) {
    body.portfolio {
        background-color: rgb(255, 236, 236);
        padding: 0;
        margin: 0;
        scroll-behavior: smooth;
    }

    div.img img {
        scale: 85%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        /* padding-top: 5%; */
        width: 100%;
        height: 100%;
        padding-left: 12px;
        position: relative;
        object-fit: scale-down;
    }
    div.sbio {
        display: block; 
        padding-top: 26px; 
        padding-bottom: 26px; 
    }

    div.bio {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none;
        padding: 0;
    }

    div.img {
        width: 100%;
        height: auto;
        padding: 0;
    }

    div.img p {
        /* display: block; */
        justify-items: center;
        vertical-align: middle;
    }

    div.grid-item {
        text-align: center;
        line-height: 100%;
        width: 145px;
        height: 145px;
        margin: 10px;
        display: inline-block;
        overflow: hidden;
        background-color: aquamarine;
    }

    div.grid-items {
        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        grid-template-rows: auto;
        display: inline-grid;
        /* gap: auto 15px; */
        width: 95%;
        justify-self: center;
        padding-left: 2.5%;
        height: 75%;
        padding-top: .5%;
    }

    div.bio p {
        /* font-size: 30%; */
        height: auto;
        width: 95%;
        text-align: right;
        clip-path: view-box;
        padding: 0%;
        padding-right: 12px;
        float: right;
        /* padding-top: 10px; */
        /* padding-right: 12px; */
    }

    div.navig {
        overflow-y: visible;
        height: auto;
        width: 90%;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;       
    }

    div.navig p {
        width: 100px;
        display: inline-block;
        padding: 0;
        float: none;
    }

    div.navig a {
        padding-left: 16px;
        padding-right: 16px;
        font-family: 'Renogare';
        color: black;
        float: none;
        display: inline-block;
    }

    div.seperator {
        height: auto;
    }

    div.dim {
        height: auto;
    }

    div.dim header,
    div.dim h4 {
        padding: 0px;
        float: left;
        width: 100%;
        text-align: left;
        margin: 0;
        margin-left: 10px;
    }

    div.seperator header,
    div.seperator h4 {
        padding: 0px;
        margin-left: 10px;
        margin: 0;
        float: left;
        width: 100%;
        text-align: left;
    }

    div.dim h4 {
        font-size: 18px;
        padding: 0px;
        float: left;
        width: 99.25%;
        text-align: left;
        margin: 0;
        margin-left: .75%;
    }

    div.seperator h4 {
        font-size: 18px;
        padding: 0px;
        float: left;
        width: 99.25%;
        text-align: left;
        margin: 0;
        margin-left: .75%;
    }

    div.grid-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .long {
        height: auto;
        width: 100%;
        margin-top: -45%;
    }

    div.overlay {
        z-index: -10;
        position: fixed;
    }

    .overlay.show {
        background-color: #ff9ae9d3;
        /* margin-top: 100%;
    padding-top: 100%; */
    }

    .overlay.close.show {
        opacity: 1;
    }

    .overlay.close {
        opacity: 0;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .overlay.close p,
    .overlay.close h2 {
        opacity: 0;
        display: inline-block;
    }

    .overlay.close.nokeyboard {
        width: 100%;
    }

    .overlay img.overlayimg {
        width: 100%;
        height: 100%;
        scale: 75%;
        /* padding: 12.5%; */
        object-fit: scale-down;
        display: none;
        transition: all .3s ease-in-out;
    }

    .overlay img.overlayimg.act {
        display: block;
    }

    div.dim header {
        font-size: 35px;
        padding: 0px;
        float: left;
        width: 99.25%;
        text-align: left;
        margin: 0;
        margin-left: .75%;
    }

    div.seperator header {
        font-size: 35px;
        padding: 0px;
        float: left;
        width: 99.25%;
        text-align: left;
        margin: 0;
        margin-left: .75%;
    }

    p,
    h2,
    h3 {
        font-family: 'Montserrat';
        text-align: center;
    }

    header,
    h2,
    h3,
    p {
        margin: 0;
        padding: 16px;
    }

    header {
        font-family: 'Renogare';
        text-align: center;
        font-size: 48px;

    }

    div {
        margin: 0;
        padding: 0;
    }

    div.topinfo {
        height: auto;
        padding-bottom: 20px;
    }

    .topinfo img {
        scale: 75%;
    }

    footer {
        height: auto;
    }
}